<template>
    <div style="background-color: #fff; height: 100%; overflow-x: auto">
        <div style="display: flex; justify-content: space-between">
            <a-form size="small" :model="pageData" layout="inline" style="margin-top: 20px">

            </a-form>
            <div class="my-tool-bar">
                <Toolbar style="margin-top: 20px" :items="['查询', '新增', '删除']" @select="selectHandle" @add="addHandler"
                    @del="deleteHandler">
                </Toolbar>
            </div>
        </div>
        <div class="cssTable">
            <a-spin :loading="pageData.pageLoading" tip="加载中" dot style="height: 100%; width: 100%; z-index: 999">
                <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true"
                    style="height: 74vh" :suppressDragLeaveHidesColumns="true" rowSelection="multiple"
                    @grid-ready="gridReady" :defaultColDef="defaultColDef" class="ag-theme-alpine"
                    :rowData="pageData.tableList" :columnDefs="tableColumns" :localeText="localeText1">
                </AgGridVuesCopys>
            </a-spin>
        </div>
        <paginationCopys :page-size-options="pagingList1" :total="total" show-total show-jumper show-page-size
            @change="PageSize" @page-size-change="change1" style="justify-content: center; margin-top: 12px"
            :page-size="size" :current="page" />
    </div>
    <a-drawer style="z-index: 999" ok-text="保存" cancel-text="关闭" :drawer-style="{ zIndex: 9999 }" :mask-closable="false"
        :width="400" :visible="pageData.showAdd" unmountOnClose height="100%" @ok="sideOk"
        @cancel="pageData.showAdd = false">
        <template #title>{{ pageData.sideTitle }}</template>
        <div>
            <a-form ref="formRef" :model="dataForm" layout="horizontal">
                <a-form-item label="编码" label-col-flex="80px" field="code" :validate-trigger="['change', 'blur']"
                    :rules="[{ required: true, message: '编码必填' }]">
                    <a-input class="bacClass" v-model="dataForm.code" allow-clear></a-input>
                </a-form-item>
                <a-form-item label="处理状态" label-col-flex="80px" field="name" :validate-trigger="['change', 'blur']"
                    :rules="[{ required: true, message: '处理状态必填' }]">
                    <a-input class="bacClass" v-model="dataForm.name" allow-clear></a-input>
                </a-form-item>
                <a-form-item label="备注" label-col-flex="80px">
                    <a-input class="bacClass" v-model="dataForm.remark" allow-clear></a-input>
                </a-form-item>
            </a-form>
        </div>
    </a-drawer>
</template>

<script lang='ts' setup>
import { reactive, toRefs, ref, onMounted } from 'vue'
import Toolbar from '@/components/Toolbar.vue'
import { post, get } from '@/api/http'
import { Message, Modal } from '@arco-design/web-vue'

import { localeText } from '@/api/aggridZw'
import { pagingList } from '@/api/paging'
import { Search, CirclePlus, Delete, EditPen } from '@element-plus/icons-vue'

const pagingList1: any = ref(pagingList)
const localeText1: any = ref(localeText)
const pageData: any = reactive({
    showAdd: false,
    sideTitle: '',
    rHeight: 0,
    tableList: [],
    pageLoading: false,
    flowCardCode: '',
    companyId: null,
    sectionName: '',
    processId: null,
    handlerList: [],
})

const dataForm: any = reactive({
    code: '',
    name: '',
    remark: '',
})

const defaultColDef: any = {
    sortable: true,
    resizable: true,
    filter: true,
}

//未处理
const gridOption = ref()
const gridReady = (params: any) => {
    gridOption.value = params.api
}
const tableColumns: any = [
    {
        headerName: '',
        checkboxSelection: true,
        headerCheckboxSelection: true,
        pinned: 'left',
        width: 50,
    },
    { headerName: '编码', field: 'code', width: 250 },
    { headerName: '处理状态', field: 'name', width: 250 },
    { headerName: '备注', field: 'remark', width: 250 },
    { headerName: '创建人', field: 'createUser', width: 250 },
    { headerName: '创建时间', field: 'createTime', width: 250 },
    {
        headerName: '操作',
        field: 'action',
        width: 150,
        pinned: 'right',
        cellRenderer: {
            template: `<a-tag class="tagCss" @click="c">修改</a-tag>`,
            setup(props: any) {
                const c = () => {
                    editHandler(props.params.data)
                }
                return {
                    c,
                }
            },
        },
    },
]

//分页
const total = ref(0)
const page = ref(1)
const size = ref(10)
function PageSize(val: any) {
    page.value = val
    doRefresh()
}
function change1(val: any) {
    size.value = val
    doRefresh()
}

//查询
const formRef = ref()
const doRefresh = () => {
    pageData.pageLoading = true
    post({
        url: '/aps/dwDefectStatus/findPagedStatus',
        data: {
            current: page.value,
            size: size.value,
        },
    })
        .then(({ data, code }: any) => {
            if (code === 200) {
                pageData.tableList = data.records
                gridOption.value.setRowData(data.records)
                total.value = data.total
            }
        })
        .catch(console.log)
        .finally(() => {
            pageData.pageLoading = false
        })
}

const selectHandle = () => {
    page.value = 1
    doRefresh()
}

const addHandler = () => {
    for (var key in dataForm) {
        dataForm[key] = ""
    }
    pageData.showAdd = true
    pageData.sideTitle = '新增处理状态'
}

const editHandler = (record: any) => {
    for (let key in record) {
        dataForm[key] = record[key]
    }
    pageData.sideTitle = '修改处理状态'
    pageData.showAdd = true
}

const sideOk = () => {
    formRef.value?.validate().then((err: any) => {
        if (!err) {
            pageData.pageLoading = true
            post({
                url: '/aps/dwDefectStatus/insertOrUpdateStatus',
                data: dataForm,
            }).then(({ code, message }) => {
                if (code == 200) {
                    Message.success('成功')
                    pageData.showAdd = false
                    doRefresh()
                } else {
                    Message.error(message)
                }
            })
            pageData.pageLoading = false
        }
    })
}

const deleteHandler = () => {
    if (gridOption.value.getSelectedRows().length === 0) {
        Message.error('请先勾选')
        return
    }
    if (gridOption.value.getSelectedRows().length > 1) {
        Message.warning('只能勾选一条数据！')
        return
    }
    Modal.confirm({
        title: '系统提示',
        content: '确认删除选中的数据?',
        onOk() {
            pageData.pageLoading = true
            post({
                url: '/aps/dwDefectStatus/deleteStatus?id=' + gridOption.value.getSelectedRows()[0].id,
            })
                .then(({ code, data, message }: any) => {
                    if (code === 200) {
                        Message.success('成功')
                        doRefresh()
                    } else {
                        Message.error(message)
                    }
                })
                .finally(() => {
                    pageData.pageLoading = false
                })
        },
    })
}

onMounted(() => {
    pageData.rHeight = document.getElementsByClassName('main-section')[0]?.clientHeight
    //弹出层的高
    if (pageData.rHeight !== undefined) {
        pageData.rHeight = pageData.rHeight
    }
    doRefresh()
})
</script>
<style lang='less' scoped>
.main-container {
    height: 100%;
}

:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}

:deep(.arco-table-td-content) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

:deep(.el-input__wrapper) {
    padding: 0;
    box-shadow: 0 0 0 0;
    border-radius: 0;
    height: 28px;
}

:deep(.el-select) {
    --el-select-input-focus-border-color: white;
    --el-select-border-color-hover: white;
}
</style>